<template>
  <div class="main">
    <div class="top-box">
      <seller :data="setterData" :size="5"></seller>
      <trend :data="trendData"></trend>
    </div>
  </div>
</template>

<script>
import Seller from '@/views/home/components/Seller'
import Trend from '@/views/home/components/Trend'

export default {
  name: 'index',
  components: {Trend, Seller},
  data() {
    return {
      // setter数据
      setterData: [],
      // trend数据
      trendData: {}
    }
  },
  mounted() {
    this.getSellerData()
    this.getTrendData()
  },
  methods: {
    async getSellerData() {
      this.setterData = await this.$api.getSeller()
    },
    async getTrendData() {
      this.trendData = await this.$api.getTrend()
    }
  }
}
</script>

<style scoped>
.main {
  width: 100%;
  height: 100%;
  position: relative;
}

.top-box {
  display: flex;
  height: 50%;
  width: 100%;
}
</style>
